Creating Page Templates 


When you complete this 
chapter, you will be able 
to: 


e Understand how tables 
can enhance the display of 
your content 


EE elements HTML table elements allow Web designers to create grid-based layouts. You 


and attributes to cus- can use tables to create templates and to solve design problems. This chapter 


tomize page templates explains how to create templates by manipulating the most commonly used 


e Learn how to take a page 


design from concept to 
HTML code control over how your content displays in the browser, while building more 


table elements and attributes. By creating and using templates, you gain more 


e Recognize basic page visually interesting pages. 
templates 
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UNDERSTANDING TABLE BASICS 


FIGURE 5-1 
Tables of tabular data 


To build effective page templates, you must be familiar with the HTML table ele- 
ments and attributes. This section describes the most commonly used table ele- 
ments and attributes. 

When HTML was introduced, tables were used only for tabular data, as 
show in Figure 5-1. 
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Stock List 


Number Description Price Discount 


3476-AB 76mm Socket 45.00 


3478-AB 78mm Socket 47.50 


d 
2490. AP 20mm Socket 50.00 All sockets 20% 


off list price 
3482-AB 82mm Socket 55.00 
3484-AB 84mm Socket 60.00 
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After examining tables, Web designers realized they could build print-like 
design structures that allowed them to break away from the left-alignment con- 
straints of basic HTML. With tables, Web designers had the control and the tools 
to build columnar layouts, align text, create gutters, and structure pages. Tables 
currently are used as the primary design tool throughout the WWW. Although 
Cascading Style Sheets (CSS) provide an alternate method of controlling page dis- 
play, they will not replace tables until all browsers provide more complete CSS 
support. There are some discrepancies across browsers in table support, espe- 
cially with the HTML 4.0 table enhancements, but tables currently are supported 
enough to make them the page design method of choice for some time to come. 


USING TABLE ELEMENTS 

The HTML <TABLE> element contains the table information, which consists of 
table row elements <TR> and individual table data cells <TD>. These are the 
three elements used most frequently when you are building tables. Figure 5-2 
shows a basic table that uses these three table elements. 


FIGURE 5-2 
Basic table 


TIP 


Remember to always 
close the <TABLE> 
element properly. 
Netscape Navigator 
does not display a 
table, or any of the 
contained data if the 
closing </TABLE> tag 
is missing. Internet 
Explorer ignores this 
omission and displays 
the table. 
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The basic table is the result of the following code: 


<TABLE BORDER> 

<TR><TD>Stock Number</TD><TD>Description</TD><TD> 

List Price</TD></TR> 

<TR><TD>3476-AB</TD><TD>76mm Socket</TD><TD>45.00</TD></TR> 
<TR><TD>3478-AB</TD><TD>78mm Socket</TD><TD>47.50</TD></TR> 
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR> 
</TABLE> 


The <TABLE> element contains the rows and cells that make up the table. 
The <TR> tag signifies the three rows of the table. Notice that the <TR> tag 
contains the table cells, but no content of its own. The BORDER attribute dis- 
plays the default border around the table and between each cell. 

You may occasionally use the <CAPTION> and <TH> elements when cre- 
ating tables. <CAPTION> lets you add a caption to the top or bottom of the 
table. By default, captions display at the top of the table. You can use the 
ALIGN=BOTTOM attribute to align the caption at the bottom of the table. 

The <TH> tag lets you create a table header cell that presents the cell con- 
tent as bold and centered. Figure 5-3 shows the same table with a caption and 
table header cells. 
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FIGURE 5-3 


Table with caption and 
table header row 


TIP 


The HTML 4.0 table 
model adds a number 
of new table elements 
that are not supported 
in all browsers. As of 
late 1999, only Internet 
Explorer supports 
these elements: 
e COL- Specifies 
column properties 
e COLGROUP — 
Specifies multiple 
column properties 
e THEAD — Signifies 
table header 
e TBODY — Signifies 
table body 
e TFOOT — Signifies 
table footer 
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The following code shows the table syntax: 


<TABLE BORDER> 

<CAPTION>76 - 84mm Socket Pricing</CAPTION> 

<TR><TH>Stock Number</TH><TH>Description</TH><TH> 

List Price</TH></TR> 

<TR><TD>3476-AB</TD><TD>76mm Socket</TD><TD>45.00</TD></TR> 
<TR><TD>3478-AB</TD><TD>78mm Socket</TD><TD>47 .50</TD></TR> 
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR> 
</TABLE> 


DEFINING TABLE ATTRIBUTES 
Table attributes let you further define a number of table characteristics. You can 
apply attributes at three levels of table structure: global, row-level, or cell-level. 


Using Global Attributes 
Global attributes affect the entire table (See Table 5-1). Place these attributes in 
the initial <TABLE> tag. 
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TABLE 5-1 Attrib Ge 
Global table ttribute escription 
attributes ALIGN Floats the table to the left or right of the text; this is a deprecated 
attribute in HTML 4.0 
BACKGROUND Specifies a background image that tiles the background of the cell: 
this is a deprecated attribute in HTML 4.0 
BGCOLOR Specifies a color for the table background; this is a deprecated ele- 
ment in HTML 4.0 
BORDER Displays a border around the table and each cell within the table 
CELLPADDING nserts spacing within the table cells on all four sides; the value for 
this attribute is a pixel count 
CELLSPACING nserts spacing between the table cells, on all four sides; the value 
or this attribute is a pixel count 
HEIGHT Adjusts the height of the table; the value either can be a percent- 
age relative to the browser window size or a fixed pixel amount; 
this is a deprecated element in HTML 4.0 
WIDTH Adjusts the width of the table; the value either can be a percent- 
age relative to the browser window size or a fixed pixel amount; 
this is a deprecated element in HTML 4.0 
Using Row-Level Attributes 
Row-level attributes affect an entire row (See Table 5-2). Place these attributes 
in the beginning <TR> tag. 
TABLE 5-2 Attrib Ge 
beet ttribute escription 
attributes ALIGN Horizontally aligns the contents of the cells within the row; use LEFT, 


CENTER, or RIGHT values; LEFT is the default; this is a deprecated 
element in HTML 4.0 


BGCOLOR Specifies a background color for the cells within the row; this is a 
deprecated element in HTML 4.0 


VALIGN Vertically aligns the contents of the cells within the row; use TOP, 
MIDDLE, or BOTTOM values; MIDDLE is the default 


Using Cell-Level Attributes 
Cell-level attributes affect only the contents of one cell (See Table 5-3). Place 
these attributes in the beginning <TD> tag. 
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TABLE 5-3 


Cell-level table 
attributes 


Attribute 


ALIGN 


BGCOLOR 


COLSPAN 


HEIGHT 


ROWSPAN 


VALIGN 


WIDTH 


Cell-level attributes take precedence over row-level attributes. The follow- 
ing code for a single table row has conflicting ALIGN attributes. The 
ALIGN=RIGHT value in the <TD> tag overrides the ALIGN=CENTER in the 


<TR> tag. 


Description 


Horizontally aligns the contents of the cell; use LEFT, CENTER, or 
RIGHT values; LEFT is the default; this is a deprecated element in 
in HTML 4.0 


Specifies a background color for the cell; this is a deprecated ele- 
ment in HTML 4.0 


Specifies the number of columns a cell spans 


Adjusts the height of the cell; the value either can be a percentage 
relative to the table size or a fixed pixel amount 


Specifies the number of rows a cell spans 


Vertically aligns the contents of the cell; use TOP, MIDDLE, or BOT- 
TOM values; MIDDLE is the default 


Adjusts the width of the cell; the value either can be a percentage 
relative to the table size or a fixed pixel amount; this is a deprecated 
element in HTML 4.0 


<TR ALIGN=CENTER><TD>Center-aligned text.</TD><TD ALIGN= 
RIGHT>Right-aligned text.</TD></TR> 


SPANNING COLUMNS 
The COLSPAN attribute lets you create cells that span multiple columns of a 
table. Column cells always span to the right. Figure 5-4 shows a table with a col- 


umn span in the first row. 
The following code shows the COLSPAN attribute: 


<TABLE 


BORDER> 


<!— Row 1 contains the column span --> 

<TR><TH COLSPAN=3>76 - 84mm Socket Pricing</TH></TR> 
<TR><TH>Stock Number</TH><TH>Description</TH><TH>List 
Price</TH></TR> 


<TR><TD>3476-AB</TD><TD>76mm Socket</TD><TD>45.00</TD></TR> 
<TR><TD>3478-AB</TD><TD>78mm Socket</TD><TD>47 .50</TD></TR> 
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR> 


</TABLE> 


FIGURE 5-4 


Table with a 
column span 
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When you build column spans, make sure that all of your columns add up 
to the correct number of cells. In this code, because each row has three cells, 
the COLSPAN attribute is set to three to span all columns of the table, as shown 
in Figure 5-4. 


SPANNING ROWS 
The ROWSPAN attribute lets you create cells that span multiple rows of a table. 
Rows always span down. Figure 5-5 shows the table in Figure 5-4 with a row 
span added to the right column. 

The following code shows the new cell that contains the ROWSPAN 
attribute and the extra column cell in the table header row: 


<TABLE BORDER> 

<!-- Row 1 contains the column span --> 

<TR><TH COLSPAN=4>76 - 84mm Socket Pricing</TH></TR> 
<TR><TH>Stock Number</TH><TH>Description</TH><TH>List 
Price</TH><TH>Discount</TH></TR> 

<!-- Row 3 contains the row span in the AER cell --> 
<TR><TD>3476-AB</TD><TD>76mm Socket</TD><TD ALIGN=RIGHT> 
45.00</TD> <TD ROWSPAN=5>Al1l sockets 20% off list price 
</TD></TR> 

<TR><TD>3478-AB</TD><TD>78mm Socket</TD><TD ALIGN=RIGHT> 
47.50</TD></TR> 
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<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD ALIGN=RIGHT> 
50.00</TD></TR> 
<TR><TD>3482-AB</TD><TD>82mm Socket</TD><TD ALIGN=RIGHT> 
55.00</TD></TR> 
<TR><TD>3484-AB</TD><TD>84mm Socket</TD><TD ALIGN=RIGHT> 
60.00</TD></TR> 


</TABLE> 
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76 - 84mm Socket Pricing 


Sé List e 
Description Price Discount 


76mm Socket 45.00 

78mm Socket 47.50 

All sockets 20% 
off list price 


80mm Socket 50.00 


82mm Socket 55.00 


84mm Socket 60.00 


The row span cell is the fourth cell in the third row. It spans down across 
five rows of the table. Notice also that to accommodate the new column, the 
COLSPAN attribute value in the first row must be changed to four. 


CHOOSING RELATIVE OR FIXED TABLE WIDTHS 

Whether you choose to use relative or fixed tables depends on your content and 
the amount of control you want over the result. Many Web designers prefer fixed 
tables because they can be sure that their view of the content will be the same 
as the user’s. The current trend is to provide content in relative tables that adapt 
to different screen resolutions. 


FIGURE 5-6 


Table with WIDTH 
attribute set to 
100 percent 


Creating Page Templates // Il3 


You can set relative table widths as percentages in the table WIDTH 
attribute. If you choose relative table widths, your tables resize based on the size 
of the browser window. Figure 5-6 shows a table with the WIDTH attribute set 
to 100 percent. 
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The browser will try to fit the content into the window, wrapping text as 
necessary. The advantage to using a relative width is that the resulting table is 
more compatible across different browser window sizes and screen resolutions. 
The disadvantage is that you have little control over the way the user sees the 
result because your content can shift from user to user based on browser win- 
dow size. 

You can set absolute table widths as pixel values in the table WIDTH 
attribute. Fixed tables remain constant regardless of the browser window size. 
The advantage to using a fixed table is that you can gain greater control over 
the result the user sees. The user’s browser size and screen resolution have no 
affect on the display of the page. Figure 5-7 shows a table with the WIDTH 
attribute set to a fixed width of 600 pixels. Notice that the table extends beyond 
the browser window. 
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FIGURE 5-7 
Table with WIDTH 


attribute set to 
600 pixels 


TIP 


Internet Explorer 
displays tables slightly 
wider than Netscape 
Navigator, so you will 
find that 590 is an 
optimal fixed table 
width when the base 
screen resolution is 
640 x 480. 
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DETERMINING THE CORRECT FIXED WIDTH FOR A TABLE 

The most common width for page template tables is between 580 and 600 pix- 
els. This width supports the current lowest common denominator—640 x 480 
screen resolution—to which most mainstream Web sites still adhere. A close 
look at the browser window in Figure 5-8 shows why you should set the width 
to approximately 600 and not 640. 

Notice the page margin on the left of the screen.The width of this margin 
is approximately ten pixels and is built into the browser. The scroll bar on the 
right of the screen is approximately 20 pixels. You do not want your table to 
extend into this area because then the horizontal scroll bar will appear. Finally, 
allow approximately another ten pixels for a right page margin. Subtracting all 
of these values from 640 equals an approximate table width of 600 pixels. These 
values vary slightly based on the browser and operating system. 


FIGURE 5-8 
Areas to account for 


when calculating 
table width 
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REMOVING DEFAULT TABLE SPACING 

Default spacing values are included in the table even when you do not specify 
values for the table’s BORDER, CELLPADDING, or CELLSPACING attributes. 
Without the default spacing values, the table cells would have no built-in white 
space between them, and the contents of adjoining cells would run together. 
Depending on the browser, approximately two pixels are reserved for each of 
these values. You can remove the default spacing by explicitly stating a zero 
value for each attribute.The code looks like this: 


<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0> 


This very useful technique lets you join the contents of adjacent cells. You 
can take an image, break it into separate pieces, and then rejoin the pieces in a 
table by removing the default spacing. Because the image is composed of sepa- 
rate parts, you can link individual parts of the image, or include animated GIFs 
in the image. (Refer to Chapter 7 for more information on animated GIFs.) 

Figure 5-9 shows five images assembled in a table with the default spacing. 
Even though borders are turned off, their default space remains in the table.The 
default cell padding and cell spacing also are adding to the white space between 
the images. 
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FIGURE 5-9 
Default table spacing 


FIGURE 5-10 


Default spacing 
removed 
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Figure 5-10 shows the same image with BORDER, CELLPADDING, and 
CELLSPACING attributes set to zero. 
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TABLE POINTERS 


When designing HTML tables, observe the following guidelines to create effec- 
tive tables: 


e Write easy-to-read code 
e Remove extra spaces 

e Center tables 

e Stack tables 

e Nest tables 


WRITING EASY-TO-READ TABLE CODE 
The HTML table code can get complicated when you add content to your 
tables. Not only do you have to manage all the table tags and attributes, but also 
the text, images, and links in your cells. One small error in your code can cause 
unpredictable results in the browser. 

You can simplify your table creation and maintenance tasks by writing clean, 
commented code. If you use plenty of white space in the code, you will find your 
tables are easier to access and change. Adding comments helps you quickly find 
the code you want.The various code samples in this chapter demonstrate the use 
of comments and white space in table code. 


REMOVING EXTRA SPACES 
Always remove any leading or trailing spaces in your table cell content. In some 
browsers the extra spaces create white space in the table cells. These spaces 
cause problems if you are trying to join the contents of adjacent cells. Figure 5-11 
shows the effect of extra space in cells. Even though the default spacing has been 
removed, there still is space between the images. 

The code shows the extra spaces after the <IMG> element within each cell. 


<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0> 

<TR> 

<TD><IMG SRC="smhome.GIF" WIDTH=113 HEIGHT=35 ALT="" 
border="0"> </TD> 

<TD><IMG SRC="Smevents.GIF" WIDTH=113 HEIGHT=35 ALT="" 
border="0"> </TD> 

<TD><IMG SRC="smparent.GIF" WIDTH=113 HEIGHT=35 ALT="" 
border="0"> </TD> 

<TD><IMG SRC="smprogrm.gif" WIDTH=113 HEIGHT=35 ALT="" 
border="0"> </TD> 

<TD><IMG SRC="smstaff.gif" WIDTH=113 HEIGHT=35 ALT="" 
border="0"> </TD> 

</TR> 

</TABLE> 
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FIGURE 5-11 


Extra spaces in 
table cells 


TIP 


Although HTML 4.0 
allows you to use the 
ALIGN=CENTER 
attribute in the 
<TABLE> element, 
most browsers do not 
support it, so you 
should use the <DIV> 
element as a con- 
tainer for the table. 
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CENTERING TABLES 
You can center tables on the page using either the <CENTER> or <DIV> ele- 
ments. Centering a fixed table makes the table independent of resolution 
changes because the table always is centered in the browser window. Because 
<CENTER> is deprecated, using the ALIGN=CENTER attribute is the preferred 
coding method. Figure 5-12 shows a centered table at 800 x 600 resolution. 
The following highlighted code shows the use of the <DIV> element to 
center the table. 


<DIV ALIGN=CENTER> 
<TABLE WIDTH=590 BORDER> 

<TR><TD COLSPAN=2 HEIGHT=50>Banner</TD></TR> 

<TR><TD HEIGHT=250 WIDTH=20%>Column 1</TD><TD>Column 2</TD> 
</TR> 

</TABLE> 

</DIV> 


STACKING TABLES 

Browsers must read the entire table code before displaying the table. Any text out- 
side of a table displays first. If you build long tables, they increase the time the user 
has to wait before the tables appear in the browser. Because of the way browsers 
display tables, build several small tables rather than one large one. This technique 
also can simplify your table design task because smaller tables are easier to work 
with. Figure 5-13 shows a page template built with two stacked tables. 
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FIGURE 5-13 SC Stacking Tables - Netscape 
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FIGURE 5-14 
Nesting tables 


Another benefit of stacking tables is that they display in the same order 
they appear in the code. This means the user can be reading the contents of 
your first table while the next one downloads. Also, more complex layouts are 
easier to build if you break them into multiple tables. Notice that the top table 
in Figure 5-13 has five columns, while the second has three. It would be much 
harder to build this layout using a single table. 


NESTING TABLES 

You can nest tables by placing an entire table within a table cell. Both Netscape 
Navigator and Internet Explorer support table nesting. Figure 5-14 shows an 
example of a two-column table with a second table nested in the right column. 
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The code for the nested tables follows.The nested table in the right column 
is highlighted. 


<TABLE WIDTH=590 BORDER HEIGHT=300> 

<TR><TD>Cell 1</TD> 

<TD ALIGN=CENTER> 

<!-- Nested table starts here --> 

<TABLE BORDER CELLSPACING=5> 

<TR><TD>nested cell 1</TD><TD>nested cell 2</TD></TR> 
<TR><TD>nested cell 3</TD><TD>nested cell 4</TD></TR> 
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</TABLE> 

<!-- Nested table ends here --> 
</TD> 

</TABLE> 


CREATING A PAGE TEMPLATE 


FIGURE 5-15 


Sketch of visualized 
layout 


Now that you understand the mechanics of building tables, you can apply your 
knowledge to creating a page template. This example demonstrates how to take a 
design sketch for a Web page and build a template for the page layout. Figure 5-15 
shows a sketch of the desired Web page layout.This layout is designed for a base 
screen resolution of 640 x 480, so the table will be fixed at a width of 590 pixels. 


< 640 pixels > 


F 


Row 1 E Fage Banner Browser 
_| canvas 


Nav Links Feature Article Linked Ads 
Image 
Row 2 I 
RER News 1 News 2 
Row 3 
Column 1 Column 2 Column 3 Column 4 


Notice that the basic structure of the table is three rows by four columns. 
Each column uses 25 percent of the total width of the template. Row spans and 
column spans break across the layout to provide visual interest. 


BUILDING THE BASIC TABLE STRUCTURE 

Start by building the basic table structure, including all the cells and rows of the 
table. As you customize the table, you can remove extraneous cells. The basic 
structure is a three-row by four-column table as shown in Figure 5-16. 
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FIGURE 5-16 


Basic three-row by 
four-column table 


TIP 


Making the borders 
visible with the BOR- 
DER attribute provides 
another visual refer- 
ence to the structure 
of the table. When 
you complete your 
design, you can turn 
borders off by remov- 
ing the BORDER 
attribute from the 
<TABLE> element. 
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The following code shows the basic table syntax: 


<TABLE BORDER> 
<TR><TD>R1C1</TD><TD>R1C2</TD><TD>R1C3</TD><TD>R1C4</TD> 
</TR> 
<TR><TD>R2C1</TD><TD>R2C2</TD><TD>R2C3</TD><TD>R2C4</TD> 
</TR> 
<TR><TD>R3C1</TD><TD>R3C2</TD><TD>R3C3</TD><TD>R3C4</TD> 
</TR> 

</TABLE> 


Notice the use of row and cell placeholders such as R1C1, which stands for 
Row One, Cell One. These placeholders are visible in the browser and provide 
reference points that are helpful as you build a table. 


SETTING A FIXED WIDTH 

One of the design characteristics of the template is a fixed width that is not 
dependent on the user’s browser size or screen resolution. To accomplish this 
characteristic, use a pixel value in the global WIDTH attribute. Figure 5-17 
shows the result of setting the width to 590 pixels. 


FIGURE 5-17 
Width set to 590 pixels 
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The following highlighted code shows the WIDTH attribute: 


<TABLE BORDER WIDTH=590> 
<TR><TD>R1C1</TD><TD>R1C2</TD><TD>R1C3</TD><TD>R1C4</TD> 
</TR> 
<TR><TD>R2C1</TD><TD>R2C2</TD><TD>R2C3</TD><TD>R2C4</TD> 
</TR> 
<TR><TD>R3C1</TD><TD>R3C2</TD><TD>R3C3</TD><TD>R3C4</TD> 
</TR> 

</TABLE> 


CREATING THE PAGE BANNER CELL 

The page banner cell is RIC1, which now contains the text “Page Banner” to 
match the design sketch in Figure 5-15.This cell spans the four columns of the 
table using the COLSPAN attribute.To create the column span successfully, you 
must remove all but one cell in the first row of the table. Figure 5-18 shows the 
results of the column span. 
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The following highlighted code shows the COLSPAN attribute: 


<TABLE BORDER WIDTH=590> 


<!-- Row 1 Contains Page Banner --> 

<TR><TD COLSPAN=4 ALIGN=CENTER HEIGHT=50>Page Banner</TD>< 
/TR> 
<TR><TD>R2C1</TD><TD>R2C2</TD><TD>R2C3</TD><TD>R2C4</TD></ 
TR> 
<TR><TD>R3C1</TD><TD>R3C2</TD><TD>R3C3</TD><TD>R3C4</TD></ 
TR> 

</TABLE> 


The first table row now contains only one cell with COLSPAN=4. The 
ALIGN attribute horizontally centers the text. The HEIGHT attribute sets the 
height of the cell to 50 pixels. 


CREATING THE FEATURE CELL 

The Feature cell in the layout is R2C2 and spans two columns. This column 
span requires the removal of one cell in row two to make room for the span. 
Figure 5-19 shows the result of the column span. 


FIGURE 5-19 
Feature cell 
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SZ 4-Column News Layout - Netscape |. {OF x! 
File Edit View Go Communicator Help 
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The following highlighted code shows the COLSPAN attribute in the 
Feature cell: 


<TABLE BORDER WIDTH=590> 


<!-- Row 1 Contains Page Banner --> 

<TR><TD COLSPAN=4 ALIGN=CENTER HEIGHT=50>Page Banner</TD> 
</TR> 

<!-- Row 2 Contains Feature Article --> 


<TR><TD>R2C1</TD><TD COLSPAN=2 
HEIGHT=200>Feature</TD><TD>R2C4</TD></TR> 

<TR><TD >R3C1</TD><TD>R3C2</TD><TD>R3C3</TD><TD>R3C4</TD> 
</TR> 

</TABLE> 


The code shows the removal of cell R2C3 to accommodate the column span. 
The HEIGHT attribute sets the vertical height for the Feature cell to 200 pixels. 


CREATING THE LINK COLUMNS 

The Nav Links and Linked Ads columns in the layout reside in cells R2C1 and 
R2C4, respectively. These cells span rows two and three of the table. The row 
spans require the removal of cells R3C1 and R3C4, illustrated in Figure 5-20. 
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FIGURE 5-20 3 4-Column News Layout - Microsoft Internet Explorer Bisi E 
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Notice that the column widths have shifted because of the removal of cells. 
You will learn how to fix the column widths in the next section. 
The following highlighted code shows the row spans: 


<TABLE BORDER WIDTH=590> 


<!-- Row 1 Contains Page Banner --> 

<TR><TD COLSPAN=4 ALIGN=CENTER HEIGHT=50>Page Banner</TD>< 
/TR> 

<!-- Row 2 Contains Nav Links, Feature Article, 


Linked Ads --> 

<TR><TD ROWSPAN=2>Nav Links</TD><TD COLSPAN=2 
HEIGHT=200>Feature</TD><TD ROWSPAN=2>Linked Ads</TD></TR> 
<TR><TD>R3C2</TD><TD>R3C3</TD></TR> 

</TABLE> 


SETTING THE COLUMN WIDTHS 

You can set column widths by using the WIDTH attribute at the cell level. 
Column widths must be set in only one cell per column. Also, set the column 
widths in only one row of the table. In the example template, no rows contain 
a cell in each column of the table. The best way to set the widths for the 
columns is to add a fourth row to the table. This row acts as a width control row. 
These cells contain the WIDTH attributes and no content. Figure 5-21 shows the 
template with the addition of a fourth row to control the column widths. 
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FIGURE 5-21 ORNER gegen ZC 
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Notice that the new row, which contains no content, appears as a few pix- 
els of additional space at the bottom of the table. With the table borders turned 
off, the control row appears as white space at the bottom of the page. The fol- 
lowing highlighted code shows the addition of the control row. 


<TABLE BORDER WIDTH=590> 


<!-- Row 1 Contains Page Banner --> 

<TR><TD COLSPAN=4 ALIGN=CENTER HEIGHT=50>Page Banner</TD> 
</TR> 

<!-- Row 2 Contains Nav Links, Feature Article, 


Linked Ads --> 

<TR><TD ROWSPAN=2>Nav Links</TD><TD COLSPAN=2 HEIGHT=200> 
Feature</TD><TD ROWSPAN=2>Linked Ads</TD></TR> 

<!-- Row 3 Contains News 1, News 2 --> 

<TR><TD WIDTH=25%>News Column 1</TD><TD WIDTH=25%>News 
Column 2</TD></TR> 

<!-- Row 4 Contains Width Controls --> 

<TR><TD WIDTH=25%></TD><TD WIDTH=25%></TD><TD WIDTH=25%> 
</TD><TD WIDTH=25%></TD> 

</TABLE> 
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TIP 


You can define column 


widths precisely if you 
use a graphic within 
the cell. Because the 
browser cannot wrap 
or truncate a graphic, 
the cell always will be 
at least as wide as the 
graphic. Some design- 
ers use transparent 
pixel GIFs (see 
Chapter 7) to size their 
columns. 


FIGURE 5-22 
Completed template 
with test content in 
Netscape Navigator 4.x 


You can set widths at the cell level to either a pixel or percentage amount. 
Test carefully to make sure that the layout is browser-compatible, as column 
widths can be troublesome. 


VERTICALLY ALIGNING CELLS 
To prepare the table for content, add the VALIGN=TOP attribute to all of the <TR> 
elements in the template. Adding this attribute forces the content to flow down 
from the top of the cell, rather than starting at the default vertical alignment set- 
ting, which is MIDDLE. The code for a single row element looks like this: 


<TR VALIGN=TOP> 


You would add this code to every <TR> element in the table. 


TESTING THE TEMPLATE 
To verify that your template works properly, populate it with test content. 
Figure 5-22 shows the template with links, image spaces, and body copy in 
Netscape Navigator 4.x. 


SZ 4-Column News Layout - Netscape Bisi x} 
File Edit View Go Communicator Help 
J Back Forward Reload Home Search Netscape Print Security Stop (ul 
I é Bookmarks Æ Goto: ~| OI" What's Related 
EETA 
E Page Banner 
Nav Links E Feature Img Feature Article Linked Ads 
Lorem ipsum 
Link One dolor sit amet, EEN 
consectetuer 
Link Two adipiscing elit, 
sed diem 
Link Three nonummy nibh 
euismod tincidunt EIER 
Link Four ut lacreet dolore magna aliguam erat volutpat. Ut 
wisis enim ad minim veniam, quis nostrud exerci 
Link Five tution ullamcorper suscipit lobortis msl ut aliquip 
ex ea commodo consequat. 
News Column 1 News Column 2 BAd3 
Duis autem dolorin Ut wisi enim ad minim sl 
EE Document: Done = a le Pee) 7 


The table borders are turned off. Notice how the content flows down the 
page as a result of the fixed table width. 
Test your template in multiple browsers. Figure 5-23 shows the same tem- 
plate in Internet Explorer 5.0.The template displays properly in both browsers. 
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FIGURE 5-23 E] 4-Column News Layout - Microsoft Internet Explorer Bisi E 
Completed template | Ele Edt View Favorites Tools Help | 
with text content in JE = F z 
Se Back r z % Search Favorit Histor X 
Internet Explorer 5.0 | SR GIES avoites Hitoy | OY 
| Address | x] pe 
Gd Page Banner 
Nav Links Feature Ima Feature Article Linked Ads 
Lorem ipsum 
Link One dolor sit amet, Ad 
consectetuer 
Link Two adipiscing elit, 
sed diem 
Link Three nonummy nibh 
D euismod E Ad? 
Link Four tincidunt ut lacreet dolore magna aliguam erat 
volutpat. Ut wisis enim ad minim veniam, quis 
Link Five nostrud exerci tution ullamcorper suscipit 
lobortis msl ut aliquip ex ea commodo 
t. 
consequal Si Ai? 
News Column 1 News Column 2 
H 
\@] Done || E My Computer Í 


The complete code for the template and test content follows. Notice the 
following coding points: 


e The IMG tag has WIDTH, HEIGHT, and AIT attributes, but no SRC value. 
This allows you to create empty image placeholders. 

e The dummy <A> tags have no HREF value. 

e The VALIGN attribute is set to TOP in the <TR> elements. 

e The body copy tests the text wrap in the cells. 


<TABLE WIDTH=590> 

<!-- Row 1 Contains Page Banner --> 

<TR> 

<TD COLSPAN=4 HEIGHT=50><IMG WIDTH=580 HEIGHT=50 ALT="Page 
Banner"></TD> 

</TR> 

<!-- Row 2 Contains Nav Links, Feature Article, 

Linked Ads --> 

<TR VALIGN=TOP> 

<TD ROWSPAN=2 ALIGN=CENTER> 

<B>Navénbsp; Links</B> 

<P><A HREF="dummy link">Link One</A></P> 

<P><A HREF="dummy link">Link Two</A></P> 

<P><A HREF="dummy link">Link Three</A></P> 
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<P><A HREF="dummy link">Link Four</A></P> 

<P><A HREF="dummy link">Link Five</A></P> 

</TD> 

<TD COLSPAN=2 HEIGHT=200 VALIGN=TOP> 

<IMG WIDTH="180" HEIGHT="140" ALIGN=LEFT ALT="Feature 
Img"> 

<B>Feature Article</B><BR>Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed diem nonummy nibh 
euismod tincidunt ut lacreet dolore magna aliguam erat 
volutpat. Ut wisis enim ad minim veniam, quis nostrud 
exerci tution ullamcorper suscipit lobortis nisl ut 
aliquip ex eacommodo consequat. 

</TD> 

<TD ROWSPAN=2 ALIGN=CENTER><B>Linked Ads</B> 

<P><IMG WIDTH=80 HEIGHT=80 ALT="Ad 1"></P> 

<P><IMG WIDTH=80 HEIGHT=80 ALT="Ad 2"></P> 

<P><IMG WIDTH=80 HEIGHT=80 ALT="Ad 3"></P> 

</TD> 

</TR> 

<!-- Row 3 Contains News 1, News 2 --> 

<TR VALIGN=TOP> 

<TD><P><B>News Column 1</B></P>Duis autem dolor in 
hendrerit in vulputate velit esse molestie consequat, vel 
illum dolore eu feugiat nulla facilisis at vero eros et 
accumsan et iusto odio dignissim qui blandit praesent 
luptatum 

</TD> 

<TD><P><B>News Column 2</B></P>Ut wisi enim ad minim 
veniam, quis nostrud exerci taion ullamcorper suscipit 
lobortis nisl ut aliquip ex en commodo consequat. 
</TD> 

</TR> 

<!-- Row 4 Contains Width Controls --> 

<TR><TD WIDTH=150></TD><TD WIDTH=150></TD><TD WIDTH=150></ 
TD><TD WIDTH=150></TD></TR> 

</TABLE> 


TEMPLATE EXAMPLES 


The following templates cover a variety of page layout needs. You may choose 
to stack different templates on top of each other for more complex layouts. 
Remember that in these examples, the HEIGHT attribute gives the blank tables 
some vertical height. Normally you would remove this attribute and let the con- 
tent determine the height of the table. 
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TWO-COLUMN TEMPLATE 

Figure 5-24 shows a typical two-column template.The left cell is for navigation, 
the right cell for content.This template is well-suited for lengthier text content. 
You can adjust the width of the right cell to constrain the text width. 


FIGURE 5-24 ¥{ 2-Column Table Template - Netscape | . {Of x! 
Two-column template File Edit View Go Communicator Help 
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<TABLE WIDTH=590 HEIGHT=250 BORDER> 
<TR> 

<TD WIDTH=100>Column 1</TD> 
<TD>Column 2</TD> 

</TR> 

</TABLE> 


TWO-COLUMN WITH BANNER TEMPLATE 

Figure 5-25 shows a basic two-column template with an additional column span 
in the first row. You can use the banner row for logos, navigation graphics, or 
banner ads. 
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FIGURE 5-25 


Two-column with 
banner template 


X 2-Column with Banner Template - Netscape 
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<TABLE WIDTH=590 BORDER> 

<TR><TD COLSPAN=2 HEIGHT=50>Banner</TD></TR> 

<TR><TD HEIGHT=250 WIDTH=20%>Column 1</TD><TD>Column 2</TD 
></TR> 

</TABLE> 


THREE-COLUMN TEMPLATE 
Figure 5-26 shows a three-column template. Use a three-column template to 
contain plain text or a variety of mixed content. 


<TABLE WIDTH=590 HEIGHT=300 BORDER> 
<TR> 

<TD WIDTH=33%>Column 1</TD> 

<TD WIDTH=33%>Column 2</TD> 

<TD WIDTH=33%>Column 3</TD> 

</TR> 

</TABLE> 


THREE-COLUMN WITH BANNER TEMPLATE 

Figure 5-27 shows the addition of a banner to the three-column layout. This lay- 
out works well as a top-level page of a section or an entire Web site. The colum- 
nar structure lends itself to scanning rather than reading. 


FIGURE 5-26 
Three-column template 


FIGURE 5-27 


Three-column with 
banner template 
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FIGURE 5-28 


Three-column main 
template 


<TABLE WIDTH=590 BORDER> 
<TR> 

<TD HEIGHT=50 COLSPAN=3>Banner</TD> 
</TR> 

<TR> 

<TD HEIGHT=250 WIDTH=33%>Column 1</TD> 
<TD WIDTH=33%>Column 2</TD> 

<TD WIDTH=33%>Column 3</TD> 

</TR> 

</TABLE> 


THREE-COLUMN MAIN TEMPLATE 


Figure 5-28 shows the three-column main template with a dominant center col- 
umn that attracts the user’s eye. This template is effective as a top-level or sec- 


tion-level page of a Web site. 


w 3-Column - Netscape 
Fie Edit View Go Communicator Help 


y Back Forward Reload Home Search Netscape Print Security 


É Bookmarks Æ Goto: 
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Column 3 
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<TABLE WIDTH=590 BORDER> 
<TR> 

<TD HEIGHT=300 WIDTH=15%>Column 1</TD> 
<TD WIDTH=70%>Column 2</TD> 

<TD WIDTH=15%>Column 3</TD> 

</TR> 

</TABLE> 


FIGURE 5-29 


Three-column 
sectioned template 
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THREE-COLUMN SECTIONED TEMPLATE 

Figure 5-29 shows the center column divided into four content areas. Use this 
template when you want to provide the user a choice between a variety of top- 
ics or sections. You can place navigation information in the left column. You 
most likely would use this template as a top-level page. 


SC 3-Column with Sections Template - Netscape 
File Edit View Go Communicator Help 
SI Back Forward Reload Home Search Netscape Print Security Stop 
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<TABLE WIDTH=590 HEIGHT=300 BORDER> 
<TR> 

<TD ROWSPAN=2 WIDTH=20%>Column 1</TD> 
<TD >Column 2-Top</TD> 

<TD>Column 3-Top</TD> 

</TR> 

<TR> 

<TD>Column 2-Bottom</TD> 

<TD>Column 3-Bottom</TD> 

</TR> 

</TABLE> 


THREE-COLUMN MAIN SECTIONED TEMPLATE 

Figure 5-30 shows the center column divided into two content areas. Another 
variety of a top-level page, this one lets you break up the primary area of the 
screen into two sections. Left and right columns can be used for navigation or 
associated links. 
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FIGURE 5-30 we 3-Column Main Sectioned Template - Netscape 
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<TABLE WIDTH=590 HEIGHT=300 BORDER> 

<TR> 

<TD HEIGHT=300 WIDTH=15% ROWSPAN=2>Column 1</TD> 
<TD WIDTH=70%>Column 2-Top</TD> 

<TD WIDTH=15% ROWSPAN=2>Column 3</TD> 

</TR> 

<TR> 

<TD>Column 2-Bottom</TD> 

</TR> 

</TABLE> 


SUMMARY & REVIEW 


Tables are one of the Web designer's best design tools. Once you master tables, you can build 
page templates and position content anywhere on a Web page. Tables can be tricky, so 
remember the following points: 


e To build effective page templates, you must be familiar with the HTML table elements 
and attributes, including the <TABLE>, <CAPTION>, and <TH> elements and global, 
row-level, and cell-level attributes. 

e Plan your tables by sketching them out on paper first. Then create a page template 
that includes a design for tables. 
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e When designing HTML tables, write easy-to-read table code, remove extra spaces, and 
choose whether to center, stack, or nest tables. 

e Use fixed table widths if you want to determine the size of your page rather than let- 
ting the browser determine the width. 

e Use relative widths if you want to build tables that resize with the browser window, 
wrapping your content to fit. 

e Work on your pages with the table borders turned on, which displays the cell bound- 
aries. When you are finished with your layout, turn the borders off. 

e Size your tables based on the page size you want to create. Use 640 x 480 as your 
base screen resolution. In most cases you set the width but not the height of your 
tables, allowing the content to flow down the page. 

e Test your work. Table settings, especially cell widths and heights, can vary based on 
the user's browser. 


REVIEW QUESTIONS 


|. Name three print-based design structures that Web designers can duplicate with 
tables. 

What are the three basic table elements? 

What table element presents its content as bold and centered? 

What attribute can you use with the <CAPTION> element? 

What are the three levels of table structure? 

What attribute would you use to adjust spacing between table cells? 

What attribute would you use to adjust spacing within table cells? 

In the following code, which attribute takes precedence? 


oN oOo FON 


<TR VALIGN=TOP><TD VALIGN=MIDDLE>Cell 1</TD><TD>Cell 2</TD 
></TR> 


9. Which attribute lets you color the background of a cell? 
10. What value should COLSPAN equal in the following code? 


<TR><TD>R1C1</TD><TD> R1C2</TD><TD> R1C3</TD></TR> 
<TR><TD>R2C1<TD COLSPAN= >R2C2</TD></TR> 


Write the code for a table that fills 75 percent of the browser window. 
What is the major disadvantage of relative width tables? 

Write the code to remove the default spacing from a table. 

Why would you want to remove the default spacing from a table? 
How do extra character spaces affect a table? 

What is the best way to center a table? 

What are the benefits of stacking tables? 

What are two rules for setting column widths in a table? 

What attribute lets you align content to the top of a cell? 

What is the difference between removing the BORDER attribute and setting 
BORDER=0? 


DD "Joo P tobacz 


N 
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PROJECTS 


1. 


Browse the WWW and find Web sites that use page templates. 

a. Create a sketch of a page from the Web site that depicts your idea of the page 
template. 

b. Examine the code to see how the template actually was built. 

c. Compare and contrast your method with the designer's method of building the 
template. 

Practice building test pages. 

a. Using one of the template examples from this chapter, build a mock-up of a fin- 
ished page using test content. 

b. Test the page in multiple browsers and note any differences in the way the content 
is displayed. 

Surf the WWW and find examples of Web sites that use fixed tables. Describe why 

you think the designers chose a fixed layout for the content. 

Surf the WWW and find examples of Web sites that use relative tables. Describe why 

you think the designers chose a relative layout for the content. 

Choose an example template from the Principles of Web Design Companion Web site 

and fill it with test content. 

a. Set the width to 100 percent. 

b. Test the results in multiple browsers and at multiple resolutions. 

c. Note any display problems and suggest how you might solve the problems. 

Create a seamless navigation bar using a table to hold the graphics together. Use the 

navigation graphics from the Principles of Web Design Companion Web site, or choose 

your own graphics. 

Describe two ways that multiple tables can affect the way your pages download. 

Build a template that meets the following criteria: 

e Fills the screen at 640 x 480 resolution without showing a horizontal scroll bar 

e Builds a three-column layout 

e Contains a banner cell that spans the layout 

e Fixes content independent of browser size 


CASE STUDY 


Design the page templates for the different information levels of your Web site. Create 
sketches for each template, and describe why the templates fit your content. 


You will find all of the page templates shown in this chapter on the Companion Web 


Site. Use these templates as a starting point for your Web pages. Adapt the page templates 
to your own needs, or build your page templates from scratch. Test the page templates with 
content in different browsers to make sure that they display properly. 


Once your templates test properly, start to build the files for your Web site by copying 


the templates to individual files and naming them to match your flowchart from Chapter 3. 


